import React, { Component } from 'react';
import {
  NavBar,
  Icon,
  List,
  WhiteSpace,
  Button,
  Toast,
  InputItem,
  WingBlank,
  TextareaItem,
} from 'antd-mobile';
import { history } from 'umi';

const LoginIcon = require('@/assets/images/train-photo.png');

export default class Person extends Component {
  inputFile = React.createRef<HTMLInputElement>();

  state = {
    userPhoto: LoginIcon,
    username: '汪**',
    password: '***',
    email: 'test@139.com',
    remark: '这个人很懒什么也没留下',
  };

  handleSave = () => {
    Toast.success('修改成功');
  };

  openSelctFile = () => {
    this.inputFile.current?.click();
  };

  fileChange = (e) => {
    if (e.target?.files?.length === 0) return;
    let file = e.target?.files[0];
    let url = URL.createObjectURL(file);
    this.setState({
      userPhoto: url,
    });
  };

  formChange = (val: string, key: string) => {
    this.setState({
      [key]: val,
    });
  };

  render() {
    return (
      <div>
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={() => history.goBack()}
        >
          个人信息
        </NavBar>
        <WhiteSpace />
        <List>
          <List.Item
            arrow="horizontal"
            onClick={this.openSelctFile}
            extra={
              <img
                style={{
                  width: '50px',
                  height: '50px',
                }}
                src={this.state.userPhoto}
              />
            }
          >
            头像
          </List.Item>
          <InputItem
            value={this.state.username}
            onChange={(val: string) => {
              this.formChange(val, 'username');
            }}
            placeholder="请输入用户名"
          >
            用户名
          </InputItem>
          <InputItem
            value={this.state.password}
            placeholder="请输入密码"
            type="password"
            onChange={(val: string) => {
              this.formChange(val, 'password');
            }}
          >
            密码
          </InputItem>
        </List>
        <WhiteSpace />
        <List>
          <InputItem
            value={this.state.email}
            onChange={(val: string) => {
              this.formChange(val, 'email');
            }}
            placeholder="请输入邮箱"
          >
            邮箱
          </InputItem>
          <TextareaItem
            onChange={(val: string) => {
              this.formChange(val, 'remark');
            }}
            rows={3}
            title="简介"
            value={this.state.remark}
            placeholder="请输入简介"
          ></TextareaItem>
        </List>

        <WhiteSpace size="xl" />
        <WingBlank>
          <Button type="primary" onClick={this.handleSave}>
            保存
          </Button>
        </WingBlank>

        {/* 隐藏选择文件框 */}
        <input
          accept="image/*"
          ref={this.inputFile}
          type="file"
          style={{
            display: 'none',
          }}
          onChange={this.fileChange}
        />
      </div>
    );
  }
}
